<template>
  <div class="app-container">
    <git-navigation />
    <el-row :gutter="10">
      <el-col :span="6" :offset="1">
        <h3>集成</h3>
        <span style="font-size: small">Web 钩子可以 绑定项目发生的事件。</span>
      </el-col>
      <el-col :span="12" :offset="1">
        <el-form ref="form" :model="form" :rules="rules" label-position="top" label-width="1">
          <el-form-item label="链接(URL)" prop="url">
            <el-input v-model="form.url" placeholder="http://example.com/trigger-ci.json" />
          </el-form-item>
          <el-form-item label="安全令牌" prop="token">
            <el-input v-model="form.token" placeholder="使用此令牌来验证接收信息的有效性。 它将通过 HTTP 头的 X-Gitlab-Token 发送。" />
          </el-form-item>
          <el-form-item label="触发器">
            <el-col>
              <el-checkbox v-model="form.hookPush">推送事件</el-checkbox>
            </el-col>
            <el-col>
              <el-checkbox v-model="form.hookTag">标签推送事件</el-checkbox>
              <span class="hook-desc">此链接将在推送新标签到版本仓库时触发</span>
            </el-col>
            <el-col>
              <el-checkbox v-model="form.hookMerge">合并请求事件</el-checkbox>
              <span class="hook-desc">合并请求创建、更新、合并时将触发此链接</span>
            </el-col>
            <el-col>
              <el-checkbox v-model="form.hookRepositoryUpdate">Repository Update</el-checkbox>
              <span class="hook-desc">仓库更新触发此链接</span>
            </el-col>
          </el-form-item>
          <el-form-item label="SSL 证书验证">
            <el-col>
              <el-checkbox v-model="form.ssl" label="开启 SSL 证书验证" />
            </el-col>
          </el-form-item>
        </el-form>
        <el-button type="success" @click="addHook">增加WebHook</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
    import { postData } from '@/api/requestData'
    import GitNavigation from './components/GitNavigation'

    export default {
        filters: {},
        components: {
            GitNavigation
        },
        data() {
            return {
                form: {
                    url: '',
                    token: '',
                    hookPush: true,
                    hookTag: false,
                    hookMerge: false,
                    hookRepositoryUpdate: false,
                    ssl: false
                },
                rules: {
                    url: [{ required: true, message: '链接地址必填', trigger: 'blur' }],
                    token: [{ required: true, message: '安全令牌必填', trigger: 'blur' }]
                }
            }
        },
        methods: {
            addHook() {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        postData('/git/add/webhook', this.form).then((response) => {
                            this.$message.success(response.message)
                        }).catch(() => {})
                    }
                })
            }
        }
    }
</script>

<style scoped>
  .hook-desc {
    display: block;
    margin-left:25px;
    height: 20px;
    line-height: 20px;
    font-size: x-small;
  }
  .push-link {
    margin-left: 25px;
  }
</style>
